<template>
  <CardModules title="子监控列表">
    <div class="camera-content">
      <div class="camera-list">
        <div class="camera-item" v-for="(item, index) in cameraList" :key="index" @click="handleSelect(item)">
          <img src="/images/video.png" alt="" />
          <div class="camera-title" >{{ item.cameraName }}</div>
        </div>
      </div>
    </div>
  </CardModules>
</template>
<script setup>
  import CardModules from '/@/components/cardModules/index.vue';
  import { ref, onMounted } from 'vue';
  import { api } from '/@/api/plat/camera.js';
  const cameraList = ref([]);
  const emit = defineEmits(['cameraSelect']);

  function handleSelect(row) {
    emit('cameraSelect', row);
  }

  function getList() {
    api.queryList().then(({ data }) => {
      cameraList.value = data;
      // 默认显示第一个
      if (data && data.length > 0) {
        handleSelect(data[0]);
      }
    });
  }

  onMounted(getList);
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
